<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>layer-weui测试</title>
    <link rel="stylesheet" href="css/base.css?v=4"/>
    <link rel="stylesheet" href="css/common.css?v=4"/>
    <style>
        * { touch-action: pan-y; }

        .wrapper{
            padding: 10px;
            text-align: left;
            line-height: 24px;
        }

        .list-wrapper{
            overflow: hidden;
        }

        .weui-pull-to-refresh {
            margin-top: -50px;
            -webkit-transition: -webkit-transform .4s;
            transition: -webkit-transform .4s;
            transition: transform .4s;
            transition: transform .4s, -webkit-transform .4s;
        }
        .weui-pull-to-refresh.refreshing {
            -webkit-transform: translate3d(0, 50px, 0);
            transform: translate3d(0, 50px, 0);
        }
        .weui-pull-to-refresh.touching {
            -webkit-transition-duration: 0s;
            transition-duration: 0s;
        }
        .weui-pull-to-refresh-layer {
            height: 30px;
            line-height: 30px;
            padding: 10px;
            text-align: center;
        }
        .weui-pull-to-refresh-layer .down {
            display: inline-block;
        }
        .weui-pull-to-refresh-layer .up,
        .weui-pull-to-refresh-layer .refresh {
            display: none;
        }
        .weui-pull-to-refresh-layer .pull-to-refresh-arrow {
            display: inline-block;
            z-index: 10;
            width: 20px;
            height: 20px;
            margin-right: 4px;
            vertical-align: -4px;
            background: no-repeat center;
            background-size: 13px 20px;
            -webkit-transition-duration: 300ms;
            transition-duration: 300ms;
            -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
            transform: rotate(0deg) translate3d(0, 0, 0);
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2026%2040'%3E%3Cpolygon%20points%3D'9%2C22%209%2C0%2017%2C0%2017%2C22%2026%2C22%2013.5%2C40%200%2C22'%20fill%3D'%238c8c8c'%2F%3E%3C%2Fsvg%3E");
        }
        .weui-pull-to-refresh-layer .pull-to-refresh-preloader {
            display: none;
            vertical-align: -4px;
            margin-right: 4px;
            width: 20px;
            height: 20px;
            -webkit-transform-origin: 50%;
            transform-origin: 50%;
            -webkit-animation: preloader-spin 1s steps(12, end) infinite;
            animation: preloader-spin 1s steps(12, end) infinite;
        }
        .weui-pull-to-refresh-layer .pull-to-refresh-preloader:after {
            display: block;
            width: 100%;
            height: 100%;
            content: "";
            background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
            background-repeat: no-repeat;
            background-position: 50%;
            background-size: 100%;
        }
        .pull-up .weui-pull-to-refresh-layer .down,
        .refreshing .weui-pull-to-refresh-layer .down {
            display: none;
        }
        .pull-up .weui-pull-to-refresh-layer .pull-to-refresh-arrow {
            display: inline-block;
            -webkit-transform: rotate(180deg) translate3d(0, 0, 0);
            transform: rotate(180deg) translate3d(0, 0, 0);
        }
        .pull-up .weui-pull-to-refresh-layer .up {
            display: inline-block;
        }
        .pull-down .weui-pull-to-refresh-layer .pull-to-refresh-arrow {
            display: inline-block;
        }
        .pull-down .weui-pull-to-refresh-layer .down {
            display: inline-block;
        }
        .refreshing .weui-pull-to-refresh-layer .pull-to-refresh-arrow {
            display: none;
        }
        .refreshing .weui-pull-to-refresh-layer .pull-to-refresh-preloader {
            display: inline-block;
        }
        .refreshing .weui-pull-to-refresh-layer .refresh {
            display: inline-block;
        }
        @-webkit-keyframes preloader-spin {
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes preloader-spin {
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
    </style>
    <script src="layer3.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
<div class="wrapper">
    <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendreritQuisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>
    <div class="list-wrapper">
        <div id="list">
            <div class="weui-pull-to-refresh-layer">
                <div class="pull-to-refresh-arrow"></div> <!-- 上下拉动的时候显示的箭头 -->
                <div class="pull-to-refresh-preloader"></div> <!-- 正在刷新的菊花 -->
                <div class="down">下拉刷新</div><!-- 下拉过程显示的文案 -->
                <div class="up">释放刷新</div><!-- 下拉超过50px显示的文案 -->
                <div class="refresh">正在刷新...</div><!-- 正在刷新时显示的文案 -->
            </div>
            <div class="con">
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>
                <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>
            </div>

        </div>
    </div>
</div>
<script>
    $('#list').pullToRefresh().on("pull-to-refresh", function() {
        var html = '<p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit</p>';
        setTimeout(function() {
            $(".con").html(html);
            $('#list').pullToRefreshDone(); // 重置下拉刷新
        }, 1500);   //模拟延迟
    });
</script>
</body>
</html>
